<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Home - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Camera.html">Camera</a><ul class='methods'><li data-type='method'><a href="module-Camera.html#.focusOnBounds">focusOnBounds</a></li><li data-type='method'><a href="module-Camera.html#.focusOnLocation">focusOnLocation</a></li><li data-type='method'><a href="module-Camera.html#.onCameraChange">onCameraChange</a></li><li data-type='method'><a href="module-Camera.html#.orbitTarget">orbitTarget</a></li><li data-type='method'><a href="module-Camera.html#.setCameraMode">setCameraMode</a></li></ul></li><li><a href="module-Controls.html">Controls</a><ul class='methods'><li data-type='method'><a href="module-Controls.html#.configureControls">configureControls</a></li></ul></li><li><a href="module-Core.html">Core</a><ul class='methods'><li data-type='method'><a href="module-Core.html#.datafileForLocation">datafileForLocation</a></li><li data-type='method'><a href="module-Core.html#.displayLocation">displayLocation</a></li><li data-type='method'><a href="module-Core.html#.init">init</a></li><li data-type='method'><a href="module-Core.html#.onBoundsFocused">onBoundsFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationError">onLocationError</a></li><li data-type='method'><a href="module-Core.html#.onLocationFocused">onLocationFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationLoaded">onLocationLoaded</a></li><li data-type='method'><a href="module-Core.html#.onUserInteraction">onUserInteraction</a></li><li data-type='method'><a href="module-Core.html#.setDisplayErrors">setDisplayErrors</a></li></ul></li><li><a href="module-Environment.html">Environment</a><ul class='methods'><li data-type='method'><a href="module-Environment.html#.environmentEditor">environmentEditor</a></li><li data-type='method'><a href="module-Environment.html#.setEnvironment">setEnvironment</a></li></ul></li><li><a href="module-Features.html">Features</a><ul class='methods'><li data-type='method'><a href="module-Features.html#.addBuiltinOverlay">addBuiltinOverlay</a></li><li data-type='method'><a href="module-Features.html#.addOverlay">addOverlay</a></li><li data-type='method'><a href="module-Features.html#.focusOnFeature">focusOnFeature</a></li><li data-type='method'><a href="module-Features.html#.highlightFeature">highlightFeature</a></li><li data-type='method'><a href="module-Features.html#.onFeatureClicked">onFeatureClicked</a></li><li data-type='method'><a href="module-Features.html#.onFeatureSelected">onFeatureSelected</a></li><li data-type='method'><a href="module-Features.html#.onOverlayAdded">onOverlayAdded</a></li><li data-type='method'><a href="module-Features.html#.removeOverlay">removeOverlay</a></li><li data-type='method'><a href="module-Features.html#.updateOverlay">updateOverlay</a></li></ul></li><li><a href="module-Location.html">Location</a><ul class='methods'><li data-type='method'><a href="module-Location.html#.setUserLocation">setUserLocation</a></li><li data-type='method'><a href="module-Location.html#.toggleUserLocationTracking">toggleUserLocationTracking</a></li></ul></li><li><a href="module-Rendering.html">Rendering</a><ul class='methods'><li data-type='method'><a href="module-Rendering.html#.pause">pause</a></li><li data-type='method'><a href="module-Rendering.html#.play">play</a></li></ul></li><li><a href="module-UI.html">UI</a><ul class='methods'><li data-type='method'><a href="module-UI.html#.setCameraModeControlVisible">setCameraModeControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setCompassVisible">setCompassVisible</a></li><li data-type='method'><a href="module-UI.html#.setRotationControlVisible">setRotationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setUserLocationControlVisible">setUserLocationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setZoomControlVisible">setZoomControlVisible</a></li></ul></li></ul>
</nav>

<div id="main">
    

    



    









    


    <section class="readme">
        <article><h1>procedural-gl.js</h1>
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/title.jpg" width="40%" align="right" />
<p>Procedural GL JS is a library for creating 3D map experiences on the web, written in JavaScript and WebGL. It is built on top of <a href="https://github.com/mrdoob/three.js">THREE.js</a>.</p>
<p>It provides an easy-to-use, but powerful framework to allow beautiful landscapes of the outdoors to be embedded into web pages. It loads super-fast and is optimized for mobile devices.</p>
<p><a href="https://www.procedural.eu/map/">Demo</a> | <a href="https://www.procedural.eu/">Docs</a> | <a href="https://www.procedural.eu/overlays.html">Overlay playground</a> | <a href="https://www.nasadem.xyz">Elevation data</a> | <a href="https://github.com/felixpalmer/procedural-gl-js">Source</a></p>
<h1>Key features</h1>
<ul>
<li>Novel GPU powered level-of-detail system gives butter-smooth rendering, including on mobile</li>
<li>Stream in standard raster imagery tiles. Supports map tiles from a variety of providers</li>
<li>Easily include elevation data for 3D terrain</li>
<li>Powerful overlay capabilities. Draw crisp markers and lines</li>
<li>Well-thought-out API, complex applications can be built without needing to deal with 3D concepts</li>
<li>Great UX and intuitive controls, mouse-based on desktop &amp; touch-based on mobile</li>
<li>Tiny filesize means library is parsed fast. Package size is less than THREE.js thanks to code stripping</li>
</ul>
<h1>Screenshots</h1>
<p>
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/1.jpg" width="17%" >
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/2.jpg" width="17%" align="left" />
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/3.jpg" width="17%" align="left" />
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/4.jpg" width="17%" align="left" />
<img src="https://raw.githubusercontent.com/felixpalmer/procedural-gl-js/main/screenshots/5.jpg" width="17%" align="left" />
</p>
<h1>Install</h1>
<pre><code>npm install procedural-gl
</code></pre>
<h1>Usage</h1>
<pre class="prettyprint source lang-javascript"><code>import Procedural from 'procedural-gl';

// Choose a DOM element into which the library should render
const container = document.getElementById( 'container' );

// Configure datasources
const datasource = {
  provider: 'maptiler',
  // To get a free key, use https://cloud.maptiler.com/account/?ref=procedural
  apiKey: 'GET_AN_API_KEY_FROM_MAPTILER'
};

// Initialize library and optionally add UI controls
Procedural.init( { container, datasource } );
Procedural.setRotationControlVisible( true );

// Load real-world location
const montBlanc = { latitude: 45.8326364, longitude: 6.8564201 };
Procedural.displayLocation( montBlanc );
</code></pre>
<h2>Connecting to a datasource</h2>
<p>To actually load data using a library you will need to connect to a source of data. The quickest way to get setup is to register for a <a href="https://cloud.maptiler.com/account/?ref=procedural">free account with MapTiler</a> and then use the API key as shown above.</p>
<p>For detailed instructions for setting up the datasource, <a href="https://github.com/felixpalmer/procedural-gl-js/wiki/Data-sources">see this page in the wiki</a></p>
<h1>Examples</h1>
<ul>
<li><a href="https://github.com/felixpalmer/new-zealand-3d/">🏞️ New Zealand National Parks</a></li>
<li><a href="https://github.com/felixpalmer/peaks-of-austria/">🏔️ Peaks of Austria</a></li>
<li><a href="https://github.com/felixpalmer/volcanoes-of-japan">🌋 Volcanoes of Japan</a></li>
</ul>
<h1>Sponsor</h1>
<p>If this library is useful to you, please consider <a href="https://github.com/sponsors/felixpalmer">sponsoring</a> the project.</p>
<h1>Blog posts / Guides</h1>
<ul>
<li><a href="https://github.com/felixpalmer/procedural-gl-js/wiki/Data-sources">Quickstart setup of datasources for Procedural GL JS</a></li>
<li><a href="https://www.pheelicks.com/posts/build-new-zealand-in-an-afternoon/">Build New Zealand in an afternoon</a></li>
</ul>
<h1>License</h1>
<p>Procedural GL JS is licensed under the <a href="https://www.mozilla.org/en-US/MPL/2.0/">Mozilla Public License Version 2.0</a>.</p></article>
    </section>






</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>